<!--
 * @LastEditTime : 2022-11-03 16:19:46
 * @FilePath     : /pyy/src/views/instandhaltung/detail/index.vue
 * @Description  : 设备维修 > 设备维修详情
-->

<template>
  <div id="instandhaltung-add">
    <van-nav-bar title="设备维修详情" left-arrow @click-left="goBack" />
    <div id="preview" v-show="isShow">
      <div v-html="htmlText"></div>
    </div>
    <div class="contaniner" v-show="!isShow">
      <van-form
        label-width="180px"
        input-align="right"
        error-message-align="right"
      >
        <div class="form-group">
          <van-field
          
            readonly
            name="consignorW"
            label="委托人"
            :rules="[{ required: true, message: '不能为空' }]"
            v-model="detailInfo.consignorW"
          />
          <van-field
            readonly
            name="principalUnit"
            label="委托方客户名称"
            v-model="detailInfo.principalUnit"
          />
          <van-field
            readonly
            
            name="consignorPhone"
            :rules="[{ required: true, message: '不能为空' }]"
            label="委托人电话"
            v-model="detailInfo.consignorPhone"
          />
          <van-field
            readonly
            name="deviceName"
            
            :rules="[{ required: true, message: '不能为空' }]"
            label="设备名称"
            v-model="detailInfo.deviceName"
          />
          <van-field
            readonly
            name="code"
            
            :rules="[{ required: true, message: '不能为空' }]"
            label="出产编号"
            v-model="detailInfo.code"
          />
          <van-field  label="生产厂家" v-model="detailInfo.manufacturer" />
          <van-field  label="型号规格" v-model="detailInfo.model" />
          <van-field readonly label="维修方式" v-model="detailInfo.way" />
          <van-field
            readonly
            name="add"
            
            label="维修地点"
            :rules="[{ required: true, message: '不能为空' }]"
            v-model="detailInfo.add"
          />
          <van-field
            readonly
            name="entrustDate"
            label="设备维修委托时间"
            v-model="detailInfo.entrustDate"
          />
          <van-field
            readonly
            name="okDate"
            label="要求完成时间"
            v-model="detailInfo.okDate"
          />
          <van-field
            readonly
            name="taketypeOfContractDate"
            label="合同类型"
            v-model="detailInfo.typeOfContract"
          /> <van-field
            readonly
            name="paymentOk"
            label="是否付款"
            v-model="detailInfo.paymentOk"
          /> <van-field
            readonly
            name="paymentMethod"
            label="付款方式"
            v-model="detailInfo.paymentMethod"
          />
          <van-field
            readonly
            name="file"
            label="附件"
            label-width="max-content"
            class="attachment"
          >
            <template #input>
              <span
                style="display: block"
                v-for="item in detailInfo.attachment"
                :key="item.fileurl"
                :download="item.filename"
                @click="preview(item.fileurl)"
              >
              <!-- :href="item.url" -->
              <!-- :download="item.filename" -->
                {{ item.filename }}
              </span>
            </template>
          </van-field>
          <van-field
            readonly
            name="okDate"
            label="要求完成时间"
            v-model="detailInfo.okDate"
          />
          <van-field
            readonly
            class="describe mandatory"
            name="describe"
            label="故障描述"
            label-width="100%"
            :rules="[{ required: true, message: '不能为空' }]"
            input-align="left"
            type="textarea"
            v-model="detailInfo.describe"
          />
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import api from "@/http/api";

export default {
  name: "InstandhaltungDetail",
  data() {
    return {
      detailInfo: {},
      htmlText:'',
      isShow:false
    };
  },
  created() {
    const id = this.$route.query.id;
    if ([null, undefined, ""].includes(id)) {
      Toast.fail("参数异常");
      this.goBack();
      return;
    }
    this.getDetail(id);
  },
  mounted() {
    document.getElementById('preview').style.width = window.screen.width +'px'

  },
  methods: {
    // 附件
    preview(id){
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });
      api.instandhaltung
        .checkTheCertificateDetails(id)
        .then((res) => {
          const { code, data, msg } = res.data || {};
          if (code !== 200) return Toast.fail(msg);
          // console.log('设备详情data :>> ', data);
          this.htmlText = data
          this.isShow = true
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
        });
    },
    /**
     * 返回
     */
    goBack() {
      this.$router.replace("/instandhaltung");
    },

    /**
     * 获取 设备维修详情
     * @param {string} id: 设备维修数据列表项id
     */
    getDetail(id) {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });

      api.instandhaltung
        .getDetail(id)
        .then((res) => {
          const { code, data, msg } = res.data || {};
          if (code !== 200) {
            Toast.fail(msg || "加载失败");
            return;
          }
          this.detailInfo = data;

          // 构建 附件列表
          this.detailInfo.attachment = Array.isArray(data.attachment)
            ? data.attachment
            : [];
          this.detailInfo.attachment.forEach((item) => {
            item.url = api.file.downloadService(item.fileurl);
          });
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
        });
    },
  },
};
</script>

<style lang="less" scoped>
#preview{
    position: absolute;
    height: 100%;
    background-color: #fff;
    img{
        width: 100%;
    }
}
#instandhaltung-add {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;

  /deep/ .van-nav-bar {
    .van-nav-bar__left {
      padding-left: 10px;
    }

    .van-nav-bar__title {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 20px;
      text-align: center;
      letter-spacing: -0.24px;
      color: #333333;
    }

    .van-nav-bar__content {
      .van-nav-bar__left {
        i {
          font-size: 20px;
          color: #999999;
        }
      }
    }
  }

  .contaniner {
    width: 100%;
    height: 0;
    flex: 1;
    overflow-y: auto;

    /deep/ .van-form {
      .form-group {
        box-sizing: border-box;
        padding: 0 12px;
        background: #ffffff;
      }
      .mandatory{
            position: relative;
            &::after{
                content: '*';
                display: block;
                position: absolute;
                left: 5px;
                top: 14px;
                font-size: 16px;
                color: red;
                transform: scale(1);

            }
        }
      .van-field {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #666666;
        padding: 12px 4px;
        border-bottom: 1px solid #e8e8e8;

        .van-field__label {
          span {
            white-space: nowrap;
          }
        }
      }

      .van-field.attachment {
        .van-field__control {
          display: block;
        }
      }

      // 故障描述
      .van-field.describe {
        flex-direction: column;
        border: none;

        .van-field__value {
          flex: none;
          width: 100%;
          height: 108px;
          background: #f8f8f8;
          box-sizing: border-box;
          padding: 8px 12px;
          margin-top: 6px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
